<template>
    <div class="mine-top">
        <div style=" display: flex; align-items: flex-start; margin-left: 15px;justify-content: space-between;">
            <div style="display: flex;align-items: center;" v-if="uid==''"  @click="gologin()">
                <img src="https://um.77.top/static/head.jpeg" alt="" style="width: 70px;height: 70px;border-radius: 35px;">
                <div style="margin-left: 10px;">
                    <div style="font-size: 20px;font-weight: 500;color: #333333;">未登录</div>
                    <div style="color: #999999;font-size: 14px;">手机登录后查看</div>
                    <div style="color: #999999;font-size: 14px;">实名认证：登录后查看</div>
                </div>
            </div>
            <div style="display: flex;align-items: center;margin-left: 15px;" v-if="uid">
                <img  :src="user.face" alt="" style="width: 70px;height: 70px;border-radius: 35px;">
                <div style="margin-left: 10px;">
                    <div style="font-size: 20px;font-weight: 500;color: #333333;">{{ user.user_name }}</div>
                    <div style="color: #999999;font-size: 14px;" v-if="user.medal">{{ user.medal }}</div>
                    <div style="color: #999999;font-size: 14px;" v-else>手机：未设置</div>
                    <div style="color: #999999;font-size: 14px;">实名认证：******</div>
                </div>
            </div>
            <div
                style="overflow: hidden;display: flex;flex-direction: column;justify-content: center;align-items: center;margin-right: 15px;">
                <div style="display: flex;align-items: center;">
                    <img src="https://um.77.top/m/static/aaimages/xiazaiapp@2x.png" alt=""
                        style="width: 30px;height: 30px;" @click="godown()">
                    <img src="https://um.77.top/m/static/aaimages/shezhi@2x.png" alt=""
                        style="width: 30px;height: 30px;margin-left: 5px;" @click="gosetting()">
                </div>
                <div style="margin-top: 15px;" @click="goqiandao()"  v-if="uid">
                    <img src="https://um.77.top/m/static/aaimages/yiqiandao@2x.png" alt=""
                        style="width: 80px;height: 32px;">
                </div>
                <div style="margin-top: 15px;" @click="goqiandao()" v-if="uid==''">
                    <img src="https://um.77.top/m/static/aaimages/qiandao@2x.png" alt=""
                        style="width: 80px;height: 32px;">
                </div>
            </div>
        </div>
        <div style="display: flex;justify-content: space-around;align-items: center;margin-top: 30px;">
            <div>
                <div style="text-align: center;font-size: 28px;font-weight: 500;">{{ user.coupon}}</div>
                <div style="color: #999999;font-size: 12px;">优惠券</div>
            </div>
            <div>
                <div style="text-align: center;font-size: 28px;font-weight: 500;">{{ user.point}} </div>
                <div style="color: #999999;font-size: 12px;">我的积分</div>
            </div>
            <div>
                <div style="text-align: center;font-size: 28px;font-weight: 500;">{{ user.coin}}</div>
                <div style="color: #999999;font-size: 12px;">平台币</div>
            </div>
        </div>
        <div class="bd_list">
            <div v-for="(item, index) in setlist" :key="index"
                style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #EEEEEE;padding: 10px 0;"
                @click="goxuanxaing(index)">
                <div style="display: flex;align-items: center;">
                    <img :src="item.image" alt="" style="width: 26px;height: 26px;">
                    <div style="font-size: 16px;color: #444444;margin-left: 5px">{{ item.name }}</div>
                </div>
                <div>
                    <img src="https://um.77.top/m/static/aaimages/jiantouright@2x.png" alt=""
                        style="width: 16px;height: 16px;">
                </div>
            </div>

        </div>
        <BottomTab  :types=4 />
    </div>
</template>

<script>
import md5 from "js-md5";
import BottomTab from '~/components/footer.vue';
export default {
    components: {
    BottomTab
  },
    data() {
        return {
            uid:'',
            t: "",
           textToHash: "",
            setlist: [
                {
                    image: 'https://um.77.top/m/static/aaimages/shoucang@2x.png',
                    name: '我的收藏'
                },
                {
                    image: 'https://um.77.top/m/static/aaimages/wodelibao@2x.png',
                    name: '我的礼包'
                },
                {
                    image: 'https://um.77.top/m/static/aaimages/bangbi@2x.png',
                    name: '我的绑币'
                },
                {
                    image: 'https://um.77.top/m/static/aaimages/zhangdan@2x.png',
                    name: '我的账单'
                },
                {
                    image: 'https://um.77.top/m/static/aaimages/xiaoxi@2x.png',
                    name: '消息中心'
                },
                {
                    image: 'https://um.77.top/m/static/aaimages/xiaohao@2x.png',
                    name: '小号管理'
                },
                {
                    image: 'https://um.77.top/m/static/aaimages/xiugaimima@2x.png',
                    name: '修改密码'
                },
                {
                    image: 'https://um.77.top/m/static/aaimages/guanyuwomen@2x.png',
                    name: '关于我们'
                }

            ],
            user:{}
        }
    },
    mounted() {
        this.uid = this.getCookie("loginnew");
         this.t = Date.now();
         const sign = `${this.uid}${this.t}fsd213ewdsadqwe2121213edsad`;
          this.textToHash = md5(sign);
        if(this.uid){
            this.person()
        }
    },
    methods: {
        gologin(){
            window.location.href = `${this.$domain}/?ct=wap&ac=login`;    
        },
        person(){
            const params = {
        ct: "app2022",
        ac: "account",
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
      };
      this.$axios.get("api/app/v3", { params }).then((response) => {
         this.user= response.data.data.user
      });
        },
        getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(";").shift();
      return "";
    },
        godown() {
            window.location.href = `${this.$domain}/?ct=download&ac=m`;
        },
        gosetting() {
            window.location.href = `${this.$domain}/?ct=wap&ac=account_info`;
        },
        goqiandao() {
            window.location.href = `${this.$domain}/?ct=wap&ac=signs`;
        },
        goxuanxaing(e) {
            switch (e) {
                case 0:
                    window.location.href = `${this.$domain}/?ct=wap&ac=mycollect`;
                    break;
                case 1:
                window.location.href = `${this.$domain}/?ct=wap&ac=mylb`;
                    break;
                    case 2:
                window.location.href = `${this.$domain}/?ct=wap&ac=mybind`;
                    break;
                    case 3:
                window.location.href = `${this.$domain}/?ct=wap&ac=myorder`;
                    break;
                    case 4:
                window.location.href = `${this.$domain}/?ct=wap&ac=messages`;
                    break;
                    case 5:
                window.location.href = `${this.$domain}/?ct=wap&ac=user_small`;
                    break;
                    case 6:
                window.location.href = `${this.$domain}/?ct=wap&ac=bind_phone`;
                    break;
                    case 7:
                window.location.href = `${this.$domain}/?ct=wap&ac=about_us`;
                    break;
                default:

            }
        }
    }
}
</script>
<style scoped>
.mine-top {
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(255, 182, 10, 0.32) 0%, rgba(255, 255, 255, 0) 100%);
    padding-top: 20px;
}

.bd_list {
    margin: 15px 10px;
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 1px rgba(229, 229, 229, 0.16);
    border-radius: 20px;
    padding: 10px;
}
</style>